<template>
	
	<view class="container" >
	
<!-- 选项卡 -->
		<view class="d-flex bg-white a-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item,index) in tabBars" :key="index"
			:class="tabIndex == item.id ? 'tabactive' : ''"
			@tap="changeTab(item.id)">
				{{item.name}}
			</view>
		</view>
	


		
		<view class="guess-section">
			<view 	v-for="(item, index) in goodsList" :key="index"	 class="guess-item"		@click="navToDetailPage(item)"	>
				<view class="image-wrapper">
					<image :src="item.imgList[0]" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.title}}</text>
				<text class="price">￥{{item.price_main}}</text>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				tabIndex:0,
				tabBars:[
					{ 
						name:"蔬菜",
				        id:'sc'
					},
					{
						name:"水果",
						id:'sg'
					},
					{
						name:"粮油",
						id:'ly'
					},
					{
						name:"肉类",
						id:'rl'
					},
					{
						name:"零食",
						id:'ls'
					},
					{
						name:"酒水",
						id:'js'
					}
				],
			};
		},

		onLoad() {
			this.getfromdb('sc');
			console.log('newcate--->onload')
		},
		methods: {
			
			// 切换选项卡
			changeTab(index){
				this.tabIndex = index
				// this.getOrderList()
				console.log("this.tabIndex:",this.tabIndex)
				//根据选项卡切换不同年份的订单的数据
				this.getfromdb(index)
			},
			// async exe(tabindex){
			// const	res= await this.getfromdb(tabindex);
			//  //    this.orderlist=res
			// 	// console.log("order.vue :orderlist :",this.orderlist)
			// },
			async getfromdb(tabindex){
				const res1 = await this.$myRuquest({
					url: '/api/detailPage_cate?cate='+tabindex,
					method:'GET',			
				});
				let goodsList=res1.data.list
				this.goodsList = goodsList || [];
			},


			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					// url: `/pages/product/product?id=${id}`
					url: `/pages/product/product?id=${id}`
				})
			},
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg('点击了搜索框');
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	.tabactive{
		// border-bottom: 5rpx solid #FD6801;
		color: #FD6801;
		margin-bottom: -5rpx;
	}
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	
	
	page {
		background: #ffffff;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	/* 秒杀专区 */
	.seckill-section{
		padding: 4upx 30upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
			.s-img{
				width: 140upx;
				height: 30upx;
			}
			.tip{
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}
			.timer{
				display:inline-block;
				width: 40upx;
				height: 36upx;
				text-align:center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0,0,0,.8);
			}
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
		}
		.floor-list{
			white-space: nowrap;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 150upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				width: 150upx;
				height: 150upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
		}
	}
	
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}
	/* 团购楼层 */
	.group-section{
		background: #fff;
		.g-swiper{
			height: 650upx;
			padding-bottom: 30upx;
		}
		.g-swiper-item{
			width: 100%;
			padding: 0 30upx;
			display:flex;
		}
		image{
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}
		.g-item{
			display:flex;
			flex-direction: column;
			overflow:hidden;
		}
		.left{
			flex: 1.2;
			margin-right: 24upx;
			.t-box{
				padding-top: 20upx;
			}
		}
		.right{
			flex: 0.8;
			flex-direction: column-reverse;
			.t-box{
				padding-bottom: 20upx;
			}
		}
		.t-box{
			height: 160upx;
			font-size: $font-base+2upx;
			color: $font-color-dark;
			line-height: 1.6;
		}
		.price{
			color:$uni-color-primary;
		}
		.m-price{
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}
		.pro-box{
			display:flex;
			align-items:center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}
		.progress-box{
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}
	/* 分类推荐楼层 */
	.hot-floor{
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;
		.floor-img-box{
			width: 100%;
			height:320upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(255,255,255,.06) 30%, #f8f8f8);
			}
		}
		.floor-img{
			width: 100%;
			height: 100%;
		}
		.floor-list{
			white-space: nowrap;
			padding: 20upx;
			padding-right: 50upx;
			border-radius: 6upx;
			margin-top:-140upx;
			margin-left: 30upx;
			background: #fff;
			box-shadow: 1px 1px 5px rgba(0,0,0,.2);
			position: relative;
			z-index: 1;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 180upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				width: 180upx;
				height: 180upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
		}
		.more{
			display:flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;
			text:first-child{
				margin-bottom: 4upx;
			}
		}
	}
	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
		/* 防止图片闪一下 */
		image{will-change: transform}
		/* scroll-view */
		.scroll-row{ width: 100%;white-space: nowrap;line-height: 44px; }
		.scroll-row-item{ display: inline-block!important; }
		
		body{
			background-color: #606266;
			// --primary:#007bff;
			// --secondary: #6c757d;
			// --success: #28a745;
			// --danger: #dc3545;
			// --warning: #ffc107;
			// --info: #17a2b8;
			// --light: #f8f9fa;
			// --dark: #343a40;
			// --muted: #6c757d;
			// --white: #fff;
			// --borderColor:#dee2e6;
			// --lightmuted:#B2B2B2;
		}
		
		/* 阴影 */
		.shadow-sm {
		    box-shadow: 0 2upx 4upx rgba(114, 130, 138, 0.2)!important;
		}
		.shadow {
		    box-shadow: 0 8upx 16upx rgba(114, 130, 138, 0.2)!important;
		}
		.shadow-lg {
		    box-shadow: 0 16upx 48upx rgba(114, 130, 138, 0.2)!important;
		}
		/* 定位 */
		.position-absolute{ position: absolute; }
		.position-fixed{ position: fixed; }
		.position-relative{ position: relative; }
		.left-0{ left: 0; }
		.top-0{ top: 0; }
		.bottom-0{ bottom: 0; }
		.right-0{ right: 0; }
		/* 宽高 */
		.w-100{ width: 100%;}
		.w-50{ width: 50%;}
		.h-100{ height: 1250upx;}
		.h-50{ width: 625upx; }
		/* 字体 */
		.font{ font-size: 25upx; }
		.font-sm{ font-size: 22upx; }
		.font-md{ font-size: 30upx; }
		.font-lg{ font-size: 40upx; }
		.font-big{ font-size: 60upx; }
		.font-weight{ font-weight: bold!important; }
		.font-weight-100{ font-weight: 100!important; }
		
		.line-h0{ line-height: 0!important; }
		.line-h{ line-height: 1!important; }
		.line-h-sm{ line-height: 1.2!important; }
		.line-h-md{ line-height: 1.5!important; }
		.line-h-lg{ line-height: 2!important; }
		.line-h-big{ line-height: 3!important; }
		
		.line-through{ text-decoration: line-through; }
		
		.text-center{ text-align: center; }
		.text-left{ text-align: left; }
		.text-right{ text-align: right; }
		
		.row { box-sizing: border-box!important; display: flex!important; flex-direction: row!important; flex-wrap: wrap;}
		[class*='col-'],[class*='span-'],[class*='span24-'] { min-height: 1px;box-sizing: border-box!important;}
		/* 栅栏一 */
		.col-1{ width: 62.5upx; } 
		.col-2{ width: 125upx; } 
		.col-3{ width: 187.5upx; } 
		.col-4{ width: 250upx;} 
		.col-5{ width: 312.5upx; } 
		.col-6{ width: 375upx; }
		.col-7{ width: 437.5upx; }
		.col-8{ width: 500upx; }
		.col-9{ width: 562.5upx; }
		.col-10{ width: 625upx; }
		.col-11{ width: 687.5upx; }
		.col-12{ width: 750upx; }
		/* 栅栏二 */
		.span-1{ width: 5%; } 
		.span-2{ width: 10%; } 
		.span-3{ width: 15%; } 
		.span-4{ width: 20%;} 
		.span-5{ width: 25%; } 
		.span-6{ width: 30%; }
		.span-7{ width: 35%; }
		.span-8{ width: 40%; }
		.span-9{ width: 45%; }
		.span-10{ width: 50%; }
		.span-11{ width: 55%; }
		.span-12{ width: 60%; }
		.span-13{ width: 65%; }
		.span-14{ width: 70%; }
		.span-15{ width: 75%; }
		.span-16{ width: 80%; }
		.span-17{ width: 85%; }
		.span-18{ width: 90%; }
		.span-19{ width: 95%; }
		.span-20{ width: 100%; }
		/* 栅栏三 */
		.span24-1{ width: 4.17%; } 
		.span24-2{ width: 8.33%; } 
		.span24-3{ width: 12.5%; } 
		.span24-4{ width: 16.67%;} 
		.span24-5{ width: 20.83%; } 
		.span24-6{ width: 25%; }
		.span24-7{ width: 29.17%; }
		.span24-8{ width: 33.33%; }
		.span24-9{ width: 37.5%; }
		.span24-10{ width: 41.67%; }
		.span24-11{ width: 45.83%; }
		.span24-12{ width: 50%; }
		.span24-13{ width: 54.17%; }
		.span24-14{ width: 58.33%; }
		.span24-15{ width: 62.5%; }
		.span24-16{ width: 66.67%; }
		.span24-17{ width: 70.83%; }
		.span24-18{ width: 75%; }
		.span24-19{ width: 79.17%; }
		.span24-20{ width: 83.33%; }
		.span24-21{ width: 87.5%; }
		.span24-22{ width: 91.67%; }
		.span24-23{ width: 95.83%; }
		.span24-24{ width: 100%; }
		
		
		/* flex布局 */
		.d-flex{ display: flex;flex-direction: row!important; }
		.d-block{ display: block; }
		.d-inline-block{ display: inline-block; }
		
		.flex-1{ flex: 1; }
		.flex-column{ flex-direction: column!important; }
		.flex-row{ flex-direction: row; }
		.flex-wrap{ flex-wrap: wrap; }
		.flex-nowrap{ flex-wrap: nowrap; }
		.flex-shrink{flex-shrink: 0;}
		.j-start{ justify-content: flex-start; }
		.j-center{ justify-content: center!important; }
		.j-end{ justify-content: flex-end; }
		.j-sb{ justify-content: space-between; }
		.a-center{ align-items:center!important; }
		.a-start{ align-items: flex-start; }
		.a-end{ align-items:flex-end; }
		.a-stretch{ align-items: stretch; }
		.a-self-start{ align-self: flex-start; }
		.a-self-auto{ align-self: auto; }
		.a-self-end{ align-self: flex-end; }
		.a-self-stretch{ align-self:stretch; }
		.a-self-baseline{ align-self:baseline; }
		/* Border */
		.border{  border-width: 1upx; border-style: solid; border-color: var(--borderColor);}
		.border-top{ border-top-width: 1upx; border-top-style: solid; border-top-color: var(--borderColor); }
		.border-right{ border-right-width: 1upx; border-right-style: solid; border-right-color: var(--borderColor);}
		.border-bottom{ border-bottom-width: 1upx;border-bottom-style: solid;border-bottom-color:var(--borderColor);}
		.border-left{ border-left-width: 1upx;border-left-style: solid;border-left-color:var(--borderColor);}
		
		.border-0{ border-width: 0; }
		.border-top-0{ border-top-width: 0; }
		.border-right-0{ border-right-width: 0; }
		.border-bottom-0{ border-bottom-width: 0; }
		.border-left-0{ border-left-width: 0; }
		
		.border-primary{ border-color: var(--primary)!important }
		.border-secondary{ border-color:var(--secondary)!important }
		.border-success{ border-color: var(--success)!important }
		.border-danger{ border-color: var(--danger)!important }
		.border-warning{ border-color:var(--warning)!important }
		.border-info{ border-color: var(--info)!important }
		.border-light{ border-color: var(--light)!important }
		.border-dark{ border-color: var(--dark)!important }
		.border-white{ border-color: var(--white)!important }
		.border-light-secondary{border-color: #F1F1F1!important;}
		
		.rounded{ border-radius: 5upx; }
		.rounded-circle{ border-radius:100%; }
		.rounded-0{ border-radius:0; }
		
		/* color */
		.text-primary{ color:var(--primary)!important; }
		.text-secondary{ color:var(--secondary)!important; }
		.text-success{ color:var(--success)!important; }
		.text-danger{ color: var(--danger)!important; }
		.text-warning{ color:var(--warning)!important; }
		.text-info{ color: var(--info)!important; }
		.text-light{ color: var(--light)!important; }
		.text-dark{ color: var(--dark)!important; }
		.text-muted{ color: var(--muted)!important; }
		.text-light-muted{ color: var(--lightmuted)!important; }
		.text-white{ color: var(--white)!important; }
		
		.bg-primary{ background-color:var(--primary)!important; }
		.bg-secondary{ background-color:var(--secondary)!important; }
		.bg-success{ background-color:var(--success)!important; }
		.bg-danger{ background-color: var(--danger)!important; }
		.bg-warning{ background-color:var(--warning)!important; }
		.bg-info{ background-color: var(--info)!important; }
		.bg-light{ background-color: var(--light)!important; }
		.bg-dark{ background-color: var(--dark)!important; }
		.bg-white{ background-color: var(--white)!important; }
		.bg-light-secondary{background-color: #F1F1F1!important;}
		
		/* Spacing */
		.m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
		.m { margin-left: 5upx;margin-right: 5upx;margin-top: 5upx;margin-bottom: 5upx;}
		.m-1 { margin-left: 10upx;margin-right: 10upx;margin-top: 10upx;margin-bottom: 10upx;}
		.m-2 { margin-left: 20upx;margin-right: 20upx;margin-top: 20upx;margin-bottom: 20upx;}
		.m-3 { margin-left: 30upx;margin-right: 30upx;margin-top: 30upx;margin-bottom: 30upx;}
		.m-4 { margin-left: 40upx;margin-right: 40upx;margin-top: 40upx;margin-bottom: 40upx;}
		.m-5 { margin-left: 50upx;margin-right: 50upx;margin-top: 50upx;margin-bottom: 50upx;}
		
		.mx-0 { margin-left: 0;margin-right: 0;}
		.mx { margin-left: 5upx;margin-right: 5upx;}
		.mx-1 { margin-left: 10upx;margin-right: 10upx;}
		.mx-2 { margin-left: 20upx;margin-right: 20upx;}
		.mx-3 { margin-left: 30upx;margin-right: 30upx;}
		.mx-4 { margin-left: 40upx;margin-right: 40upx;}
		.mx-5 { margin-left: 50upx;margin-right: 50upx;}
		
		.my-0 { margin-top: 0;margin-bottom: 0;}
		.my { margin-top: 5upx;margin-bottom: 5upx;}
		.my-1 { margin-top: 10upx;margin-bottom: 10upx;}
		.my-2 { margin-top: 20upx;margin-bottom: 20upx;}
		.my-3 { margin-top: 30upx;margin-bottom: 30upx;}
		.my-4 { margin-top: 40upx;margin-bottom: 40upx;}
		.my-5 { margin-top: 50upx;margin-bottom: 50upx;}
		
		.mt-0 { margin-top: 0;}
		.mt { margin-top: 5upx;}
		.mt-auto { margin-top: auto;}
		.mt-1 { margin-top: 10upx;}
		.mt-2 { margin-top: 20upx;}
		.mt-3 { margin-top: 30upx;}
		.mt-4 { margin-top: 40upx;}
		.mt-5 { margin-top: 50upx;}
		
		.mb-0 { margin-bottom: 0;}
		.mb { margin-bottom: 5upx;}
		.mb-auto { margin-bottom: auto;}
		.mb-1 { margin-bottom: 10upx;}
		.mb-2 { margin-bottom: 20upx;}
		.mb-3 { margin-bottom: 30upx;}
		.mb-4 { margin-bottom: 40upx;}
		.mb-5 { margin-bottom: 50upx;}
		
		.ml-0 { margin-left: 0;}
		.ml { margin-left: 5upx;}
		.ml-auto { margin-left: auto;}
		.ml-1 { margin-left: 10upx;}
		.ml-2 { margin-left: 20upx;}
		.ml-3 { margin-left: 30upx;}
		.ml-4 { margin-left: 40upx;}
		.ml-5 { margin-left: 50upx;}
		
		.mr-0 { margin-right: 0;}
		.mr { margin-right: 5upx;}
		.mr-1 { margin-right: 10upx;}
		.mr-2 { margin-right: 20upx;}
		.mr-3 { margin-right: 30upx;}
		.mr-4 { margin-right: 40upx;}
		.mr-5 { margin-right: 50upx;}
		
		.p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
		.p {padding-left: 5upx;padding-right: 5upx;padding-top: 5upx;padding-bottom:5upx;}
		.p-1 {padding-left: 10upx;padding-right: 10upx;padding-top: 10upx;padding-bottom: 10upx;}
		.p-2 {padding-left: 20upx;padding-right: 20upx;padding-top: 20upx;padding-bottom: 20upx;}
		.p-3 {padding-left: 30upx;padding-right: 30upx;padding-top: 30upx;padding-bottom: 30upx;}
		.p-4 {padding-left: 40upx;padding-right: 40upx;padding-top: 40upx;padding-bottom: 40upx;}
		.p-5 {padding-left: 50upx;padding-right: 50upx;padding-top: 50upx;padding-bottom: 50upx;}
		
		.px-0 { padding-left: 0;padding-right: 0;}
		.px { padding-left: 5upx;padding-right: 5upx;}
		.px-1 { padding-left: 10upx;padding-right: 10upx;}
		.px-2 { padding-left: 20upx;padding-right: 20upx;}
		.px-3 { padding-left: 30upx;padding-right: 30upx;}
		.px-4 { padding-left: 40upx;padding-right: 40upx;}
		.px-5 { padding-left: 50upx;padding-right: 50upx;}
		
		.py-0 { padding-top: 0;padding-bottom: 0;}
		.py { padding-top: 5upx;padding-bottom: 5upx;}
		.py-1 { padding-top: 10upx;padding-bottom: 10upx;}
		.py-2 { padding-top: 20upx;padding-bottom: 20upx;}
		.py-3 { padding-top: 30upx;padding-bottom: 30upx;}
		.py-4 { padding-top: 40upx;padding-bottom: 40upx;}
		.py-5 { padding-top: 50upx;padding-bottom: 50upx;}
		
		.pt-0 { padding-top: 0;}
		.pt { padding-top: 5upx;}
		.pt-1 { padding-top: 10upx;}
		.pt-2 { padding-top: 20upx;}
		.pt-3 { padding-top: 30upx;}
		.pt-4 { padding-top: 40upx;}
		.pt-5 { padding-top: 50upx;}
		
		.pb-0 { padding-bottom: 0;}
		.pb { padding-bottom: 5upx;}
		.pb-1 { padding-bottom: 10upx;}
		.pb-2 { padding-bottom: 20upx;}
		.pb-3 { padding-bottom: 30upx;}
		.pb-4 { padding-bottom: 40upx;}
		.pb-5 { padding-bottom: 50upx;}
		
		.pl-0 { padding-left: 0;}
		.pl { padding-left: 5upx;}
		.pl-1 { padding-left: 10upx;}
		.pl-2 { padding-left: 20upx;}
		.pl-3 { padding-left: 30upx;}
		.pl-4 { padding-left: 40upx;}
		.pl-5 { padding-left: 50upx;}
		
		.pr-0 { padding-right: 0;}
		.pr { padding-right: 5upx;}
		.pr-1 { padding-right: 10upx;}
		.pr-2 { padding-right: 20upx;}
		.pr-3 { padding-right: 30upx;}
		.pr-4 { padding-right: 40upx;}
		.pr-5 { padding-right: 50upx;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.scroll-row{ flex-direction: row; }
	
	/* 定位 */
	.position-absolute{ position: absolute; }
	.position-fixed{ position: fixed; }
	.position-relative{ position: relative; }
	.left-0{ left: 0; }
	.top-0{ top: 0; }
	.bottom-0{ bottom: 0; }
	.right-0{ right: 0; }
	
	/* 宽高 */
	.w-100{ width: 750px;}
	.w-50{ width: 375px;}
	.h-100{ height: 1250px;}
	.h-50{ width: 625px; }
	/* 字体 */
	.font{ font-size: 30rpx; }
	.font-sm{ font-size: 25rpx; }
	.font-md{ font-size: 35rpx!important; }
	.font-lg{ font-size: 40rpx; }
	.font-big{ font-size: 60rpx; }
	
	.font-weight{ font-weight: bold; }
	.font-weight-100{ font-weight: 100!important; }
	
	.line-through{ text-decoration: line-through; }
	
	
	/*  -- 栅格布局 -- */
	.row { flex-direction: row; flex-wrap: wrap;}
	.col-1{ width: 62.5px; } 
	.col-2{ width: 125px; } 
	.col-3{ width: 187.5px; } 
	.col-4{ width: 250px;} 
	.col-5{ width: 312.5px; } 
	.col-6{ width: 375px; }
	.col-7{ width: 437.5px; }
	.col-8{ width: 500px; }
	.col-9{ width: 562.5px; }
	.col-10{ width: 625px; }
	.col-11{ width: 687.5px; }
	.col-12{ width: 750px; }
	
	/* flex布局 */
	.d-flex{ flex-direction: row; }
	.flex-1{ flex: 1; }
	.flex-column{ flex-direction: column; }
	.flex-row{ flex-direction: row; }
	.flex-wrap{ flex-wrap: wrap; }
	.flex-nowrap{ flex-wrap: nowrap; }
	.j-start{ justify-content: flex-start; }
	.j-center{ justify-content: center; }
	.j-end{ justify-content: flex-end; }
	.j-sb{ justify-content: space-between; }
	.a-center{ align-items:center; }
	.a-start{ align-items: flex-start; }
	.a-end{ align-items:flex-end; }
	.a-stretch{ align-items: stretch; }
	/* Border */
	.border{  border-width: 1px; border-style: solid; border-color: #dee2e6;}
	.border-top{ border-top-width: 1px; border-top-style: solid; border-top-color: #dee2e6; }
	.border-right{ border-right-width: 1px; border-right-style: solid; border-right-color: #dee2e6;}
	.border-bottom{ border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color:#dee2e6;}
	.border-left{ border-left-width: 1px;border-left-style: solid;border-left-color:#dee2e6;}
	
	.border-0{ border-width: 0; }
	.border-top-0{ border-top-width: 0; }
	.border-right-0{ border-right-width: 0; }
	.border-bottom-0{ border-bottom-width: 0; }
	.border-left-0{ border-left-width: 0; }
	
	.border-primary{ border-color: #007bff }
	.border-secondary{ border-color:#6c757d }
	.border-success{ border-color: #6c757d }
	.border-danger{ border-color: #dc3545 }
	.border-warning{ border-color:#ffc107 }
	.border-info{ border-color: #17a2b8 }
	.border-light{ border-color: #f8f9fa }
	.border-dark{ border-color: #343a40 }
	.border-white{ border-color: #ffffff }
	.border-light-secondary{border-color: #F1F1F1!important;}
	
	.rounded{ border-radius: 5px; }
	.rounded-circle{ border-radius:100%; }
	.rounded-0{ border-radius:0; }
	
	/* color */
	.text-primary{ color:#007bff; }
	.text-secondary{ color:#6c757d; }
	.text-success{ color:#6c757d; }
	.text-danger{ color: #dc3545; }
	.text-warning{ color:#ffc107; }
	.text-info{ color: #17a2b8; }
	.text-light{ color: #f8f9fa; }
	.text-dark{ color: #343a40; }
	.text-muted{ color: #6c757d; }
	.text-light-muted{ color: #B2B2B2!important; }
	.text-white{ color: #ffffff; }
	
	.bg-primary{ background-color:#007bff; }
	.bg-secondary{ background-color:#6c757d; }
	.bg-success{ background-color:#6c757d; }
	.bg-danger{ background-color: #dc3545; }
	.bg-warning{ background-color:#ffc107; }
	.bg-info{ background-color: #17a2b8; }
	.bg-light{ background-color: #f8f9fa; }
	.bg-dark{ background-color: #343a40; }
	.bg-white{ background-color: #ffffff; }
	
	/*  -- 内外边距 -- */
	.m-0 { margin: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.m-auto{ margin: auto; }
	/* #endif */
	.m-1 { margin: 10rpx; }
	.m-2 { margin: 20rpx; }
	.m-3 { margin: 30rpx; }
	.m-4 { margin: 40rpx; }
	.m-5 { margin: 50rpx; }
	.mt-0 { margin-top: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.mt-auto { margin-top: auto; }
	/* #endif */
	.mt-1 { margin-top: 10rpx; }
	.mt-2 { margin-top: 20rpx; }
	.mt-3 { margin-top: 30rpx; }
	.mt-4 { margin-top: 40rpx; }
	.mt-5 { margin-top: 50rpx; }
	.mb-0 { margin-bottom: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.mb-auto { margin-bottom: auto; }
	/* #endif */
	.mb-1 { margin-bottom: 10rpx; }
	.mb-2 { margin-bottom: 20rpx; }
	.mb-3 { margin-bottom: 30rpx; }
	.mb-4 { margin-bottom: 40rpx; }
	.mb-5 { margin-bottom: 50rpx; }
	.ml-0 { margin-left: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.ml-auto { margin-left: auto; }
	/* #endif */
	.ml-1 { margin-left: 10rpx; }
	.ml-2 { margin-left: 20rpx; }
	.ml-3 { margin-left: 30rpx; }
	.ml-4 { margin-left: 40rpx; }
	.ml-5 { margin-left: 50rpx; }
	.mr-0 { margin-right: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.mr-auto { margin-right: auto; }
	/* #endif */
	.mr-1 { margin-right: 10rpx; }
	.mr-2 { margin-right: 20rpx; }
	.mr-3 { margin-right: 30rpx; }
	.mr-4 { margin-right: 40rpx; }
	.mr-5 { margin-right: 50rpx; }
	.my-0 { margin-top: 0; margin-bottom: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.my-auto { margin-top: auto; margin-bottom: auto; }
	/* #endif */
	.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }
	.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }
	.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }
	.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }
	.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
	.mx-0 { margin-left: 0; margin-right: 0; }
	/* #ifndef APP-PLUS-NVUE */
	.mx-auto { margin-left: auto; margin-right: auto; }
	/* #endif */
	.mx-1 { margin-left: 10rpx; margin-right: 10rpx;}
	.mx-2 { margin-left: 20rpx; margin-right: 20rpx;}
	.mx-3 { margin-left: 30rpx; margin-right: 30rpx;}
	.mx-4 { margin-left: 40rpx; margin-right: 40rpx;}
	.mx-5 { margin-left: 50rpx; margin-right: 50rpx;}
	
	.p-0 { padding: 0; }
	.p { padding: 5rpx; }
	.p-1 { padding: 10rpx; }
	.p-2 { padding: 20rpx; }
	.p-3 { padding: 30rpx; }
	.p-4 { padding: 40rpx; }
	.p-5 { padding: 50rpx; }
	.pt-0 { padding-top: 0; }
	.pt { padding-top: 5rpx; }
	.pt-1 { padding-top: 10rpx; }
	.pt-2 { padding-top: 20rpx; }
	.pt-3 { padding-top: 30rpx; }
	.pt-4 { padding-top: 40rpx; }
	.pt-5 { padding-top: 50rpx; }
	.pb-0 { padding-bottom: 0; }
	.pb-1 { padding-bottom: 10rpx; }
	.pb { padding-bottom: 5rpx; }
	.pb-2 { padding-bottom: 20rpx; }
	.pb-3 { padding-bottom: 30rpx; }
	.pb-4 { padding-bottom: 40rpx; }
	.pb-5 { padding-bottom: 50rpx; }
	.pl-0 { padding-left: 0; }
	.pl { padding-left: 5rpx; }
	.pl-1 { padding-left: 10rpx; }
	.pl-2 { padding-left: 20rpx; }
	.pl-3 { padding-left: 30rpx; }
	.pl-4 { padding-left: 40rpx; }
	.pl-5 { padding-left: 50rpx; }
	.pr-0 { padding-right: 0; }
	.pr { padding-right: 5rpx; }
	.pr-1 { padding-right: 10rpx; }
	.pr-2 { padding-right: 20rpx; }
	.pr-3 { padding-right: 30rpx; }
	.pr-4 { padding-right: 40rpx; }
	.pr-5 { padding-right: 50rpx; }
	.py-0 { padding-top: 0; padding-bottom: 0; }
	.py { padding-top: 5rpx; padding-bottom: 5rpx; }
	.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }
	.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }
	.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }
	.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }
	.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }
	.px-0 { padding-left: 0; padding-right: 0; }
	.px-1 { padding-left: 10rpx; padding-right: 10rpx;}
	.px { padding-left: 5rpx; padding-right: 5rpx;}
	.px-2 { padding-left: 20rpx; padding-right: 20rpx;}
	.px-3 { padding-left: 30rpx; padding-right: 30rpx;}
	.px-4 { padding-left: 40rpx; padding-right: 40rpx;}
	.px-5 { padding-left: 50rpx; padding-right: 50rpx;}
	

</style>
